<template>
	<view class="content">
		<button class="size" @tap="handle(key)" v-for="(site,key) in barcodeList" :key="site"
			size="mini">{{key}}--{{site}}</button>
		<view class="fixed">当前显示的值 {{num}}</view>

		<!-- 方法集 -->
		<view>---------------</view>
		<button class="size" @tap="scanEvent" size="mini">create创建Barcode扫码控件</button>
		<button class="size" @tap="startRecognize" size="mini">创建扫码控件</button>
		<button class="size" @tap="startScan" size="mini">开始扫码</button>
		<button class="size" @tap="cancel" size="mini">取消扫码识别</button>
		<button class="size" @tap="close" size="mini">关闭条码识别控件</button>
		<view id="bcid"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barcodeList: {
					"QR": "QR二维码，数值为0",
					"EAN13": "EAN条形码标准版，数值为1",
					"EAN8": "ENA条形码简版，数值为2",
					"AZTEC": "Aztec二维码，数值为3",
					"DATAMATRIX": "Data Matrix二维码，数值为4",
					"UPCA": "UPC条形码标准版，数值为5",
					"UPCE": "UPC条形码缩短版，数值为6",
					"CODABAR": "Codabar条形码，数值为7",
					"CODE39": "Code39条形码，数值为8",
					"CODE93": "Code93条形码，数值为9",
					"CODE128": "Code128条形码，数值为10",
					"ITF": "ITF条形码，数值为11",
					"PDF417": "PDF 417二维条码，数值为13"
				},
				num: 0,
				barcode: null,
				scan:null
			}
		},
		onLoad() {},
		methods: {
			handle(key) {
				this.num = plus.barcode[key];
			},
			scanEvent() {
				// 创建barcode扫码控件
				if (!this.barcode) {
					console.log("进来了没有")
					this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
						top: '0px',
						left: '0px',
						width: '100%',
						height: '200px',
						position: 'absolute',
						background:"pink",
						frameColor:"#cccccc"
					});
					this.barcode.onmarked = onmarked;
					// 显示条件：必须添加到webview窗口
					plus.webview.currentWebview().append(this.barcode);
				}
				this.barcode.start();
			},
			startRecognize(){
				//构造扫码识别控件
				this.scan = new plus.barcode.Barcode('bcid');
				this.scan.onmarked = onmarked; 
			},
			startScan()	{
				this.scan.start();
			},
			cancel(){
				this.scan.cancel();
			},
			close(){
				this.scan && this.scan.close();
			}
		}
	}
	function onmarked(type, result) {
		console.log("type=>",type)
		console.log("result=>",result)
		// 扫码成功回调
		let text = '未知: ';
		switch (type) {
			case plus.barcode.QR:
				text = 'QR: ';
				break;
			case plus.barcode.EAN13:
				text = 'EAN13: ';
				break;
			case plus.barcode.EAN8:
				text = 'EAN8: ';
				break;
		}
		console.log(text + result);
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 14px;
		color: #8f8f94;
	}

	.size {
		margin: 20rpx 0;
	}

	.fixed {
		position: fixed;
		top: 20%;
		left: 40rpx;
		color: red;
		font-weight: 500;
	}
	#bcid {
	background:#0F0;
	height:300px;
	width:280px;
}
</style>
